<template>
	<view class="accountSecurity">
		<view class="status_bar"></view>
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">修改密码</view>
				<text class="save"></text>
			</view>
		</view>

		<view class="accountSecurity-content">
			<uni-forms :modelValue="formData" :rules="rules" ref="form">
				<uni-forms-item label="原始密码" name="oldPwd">
					<uni-easyinput type="text" v-model="formData.oldPwd" placeholder="请输入旧密码" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="newPwd">
					<uni-easyinput type="password" v-model="formData.newPwd" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="confirmPwd">
					<uni-easyinput type="password" v-model="formData.confirmPwd" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit" class="login-button">确认</button>
		</view>
	</view>
</template>

<script>
import { changepwd } from '@/services/user.js';
export default {
	data() {
		return {
			formData: {},
			rules: {
				oldPwd: {
					rules: [
						{
							required: true,
							errorMessage: '请输入旧密码'
						}
					],
					validateTrigger: 'submit'
				},
				newPwd: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码'
						},
						{
							minLength: 6,
							maxLength: 12,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					validateTrigger: 'submit'
				},
				confirmPwd: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码'
						},
						{
							minLength: 6,
							maxLength: 12,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	methods: {
		submit() {
			this.$refs.form
				.validate()
				.then((res) => {
					this.changepwd(this.formData);
				})
				.catch((err) => {
					console.log('表单错误信息：', err);
				});
		},
		back(){
			uni.navigateBack()
		},
		async changepwd(data) {
			const res = await changepwd(data);
			if (res.code == 200) {
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					duration: 500
				});
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/login/index'
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 500
				});
			}
		}
	}
};
</script>

<style lang="scss">
.accountSecurity {
	background-color: #f2f3f7;
	height: 100vh;
	.header {
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		/* 自定义导航栏 */
		.status_title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100.061rpx;
			padding: 0 16px;
			background-color: #ffffff;
		}
		.status_left {
			width: 24px !important;
		}
		.status_center {
			font-size: 17px;
			font-weight: 700;
		}
		.status_right {
			width: 22px;
		}
		.save {
			color: #0fb09b;
			font-size: 20rpx;
		}
	}
	.accountSecurity-content {
		padding: 32px;
		background-color: #fff;
		margin-top: 18px;
		.login-button {
			background-color: #0fb09b;
			color: #fff;
			border-radius: 22px;
		}
	}
	::v-deep {
		.wu-cell {
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 16rpx;
		}
		.wu-cell__body {
			padding: 20px !important ;
		}
		.wu-cell__title-text {
			font-size: 20rpx;
		}
	}
}
</style>
